<template>
<view class="content">
  <topHeight></topHeight>
  <view ></view>
  <view class="helpItem" v-for="item in helpList" :key="item.id">
    <view class="helpTitle">
      <text>{{item.title}}</text>
      <view class="iconfont "
            :class="item.isShow?'icon-mainongji':'icon-bianzu64'"
            @click="showExplain(item.id-1)"
      >
      </view>
    </view>
    <view class="explain" v-show="!item.isShow">{{item.explain}}</view>
  </view>
</view>
</template>

<script>
import topHeight from "@/components/top-height";
import helpList from "@/layout/helpList";

export default {
  name: "Help",
  components:{
    topHeight
  },
  data(){
    return{
      helpList:helpList,
    }
  },
  mounted() {
  },
  methods:{
    showExplain(e){
      this.helpList[e].isShow=!this.helpList[e].isShow;
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin: 20rpx 30rpx 0 30rpx;
  font-size: 36rpx;
  .helpItem{
    border-bottom: 3rpx solid #F8F8F8;
    font-weight: bold;
    margin-top: 20rpx;
    .helpTitle{
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
    }
    .explain{
      width: 100%;
      //height: 150rpx;
      background-color: #F8F8F8;
      border-radius: 25rpx;
      margin: 0 0 30rpx 0;
      padding: 20rpx;
      color: #A7ADB8;
    }
  }
}
</style>
